<style lang="scss">
.customClass {
  width: 80%;
}
</style>

<template>
  <el-table :data="chiGuList"
            style="width: 100%"
            class="table"
            height="100%">
    <el-table-column
        label="名称">
      <p slot-scope="scope" @click="buyCell(scope.row)">
        <span>{{ scope.row.name }}</span>
      </p>
    </el-table-column>
    <el-table-column
        prop="zfMoney"
        label="持股涨幅">
      <div slot-scope="scope">
        <p>涨幅：{{ scope.row.ykZf }}</p>
        <p>盈亏：{{ scope.row.ykMoney }}</p>
      </div>
    </el-table-column>
    <el-table-column
        label="价格">
      <div slot-scope="scope">
        <p>当前：{{ scope.row.close }}</p>
        <p>涨幅：{{ scope.row.zf }}</p>
      </div>
    </el-table-column>
    <el-table-column
        prop="sumMoney"
        label="总金额(元)">
    </el-table-column>
    <el-table-column
        prop="cost"
        label="成本(元)">
    </el-table-column>
    <el-table-column
        prop="count"
        label="数量">
    </el-table-column>
  </el-table>
</template>

<script>
import {buy, getChiGuList, sell} from '../utils/request'

export default {
  data() {
    return {
      chiGuList: [],
      timer: null,
    }
  },
  created() {
    this.getChiGuLists();
    this.timer = setInterval(() => {
      this.getChiGuLists();
    }, 3000)
  },
  methods: {
    getChiGuLists() {
      getChiGuList().then((res) => {
        if (res.status) {
          this.chiGuList = res.content
        } else {
          this.$message.error(res.content);
        }
      })
    },
    callback(row, instance, cb, msg) {
      let count = instance.inputValue;
      this.$alert(`<div>
                            <p>股票：${row.name}</p>
                            <p>数量：${count}股</p>
                            <p>总价：${instance.inputValue * row.close}</p>
                            </div>`, `是否${msg}？`,
          {
            customClass: 'customClass',
            dangerouslyUseHTMLString: true,
            callback: (action) => {
              if (action === 'confirm') {
                cb({
                  channel: row.channel,
                  count: count,
                  code: row.code,
                  name: row.name
                }).then((res) => {
                  res && res.status && this.$message({
                    type: 'info',
                    message: `${msg}成功`
                  })
                });
              }
            }
          });
    },
    buyCell(row) {
      this.$prompt('请输入数量', row.name, {
        distinguishCancelAndClose: true,
        confirmButtonText: '买入',
        cancelButtonText: '卖出',
        inputValue: row.count,
        customClass: 'customClass',
        callback: (action, instance) => {
          if (action === 'confirm') {
            this.callback(row, instance, buy, '买入');
          } else if (action === 'cancel') {
            this.callback(row, instance, sell, '卖出');
          }
        }
      })
    }
  },
  beforeDestroy() {
    clearInterval(this.timer);
  }
}
</script>
